<template>
	<div>
		<h3 id="props" data-v-e74a3c6e="">{{mode}}</h3>
		<el-table v-show="mode=='Props'" :data="data" border style="width: 100%"
			:header-cell-style="{borderColor:'#dfe2e5',color:'#2c3e50'}">
			<el-table-column label="参数">
				<template #default="scope">
					<span class="copy-icons" title="点击复制"
						@click="clickCopy(scope.row.parameter)">{{scope.row.parameter}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="explain" label="说明" width="200">
			</el-table-column>
			<el-table-column prop="type" label="类型">
			</el-table-column>
			<el-table-column prop="defaultValue" label="默认值">
			</el-table-column>
			<el-table-column prop="optionalValue" label="可选值">
			</el-table-column>
		</el-table>
		
		<el-table v-show="mode=='Event'" :data="data" border style="width: 100%"
			:header-cell-style="{borderColor:'#dfe2e5',color:'#2c3e50'}">
			<el-table-column label="事件名">
				<template #default="scope">
					<span class="copy-icons" title="点击复制"
						@click="clickCopy(scope.row.parameter)">{{scope.row.parameter}}</span>
				</template>
			</el-table-column>
			<el-table-column prop="explain" label="说明">
			</el-table-column>
			<el-table-column prop="callback" label="回调参数">
			</el-table-column>
		</el-table>
	</div>
</template>

<script>
	import {
		ElMessage
	} from 'element-plus'
	export default {
		name: 'dev-table',
		props: {
			//传递过来的数组信息
			data: {
				type: Array,
				default: () => []
			},
			mode: {
				type: String,
				default: 'Props'
			}
		},
		data() {
			return {

			}
		},
		methods: {
			//复制参数
			clickCopy(val) {
				// createElement() 方法通过指定名称创建一个元素
				var copyInput = document.createElement("input");
				//val是要复制的内容
				copyInput.setAttribute("value", val);
				document.body.appendChild(copyInput);
				copyInput.select();
				try {
					var copyed = document.execCommand("copy");
					if (copyed) {
						document.body.removeChild(copyInput);
						ElMessage.success('复制成功')
					}
				} catch {
					ElMessage.error('复制失败，请检查浏览器兼容')
				}
			}
		}

	}
</script>

<style>
	.copy-icons {
		cursor: pointer;
		margin-left: 10px;
	}

	.copy-icons:hover {
		color: #409eff;
	}
</style>
